Bullet Journal をやってみる

最近ツイッターを始めたおかげで Bullet Journal (BuJo) を知ったよ！（遅まきながら）

元々アナログノート派だったし、このコンセプトめっちゃ好き！

Scrapboxで同じことやってみたかったので、各bulletを「アイコンになるタグ」のやりかたで書いてみた。

! [!] ひらめき _ [_] タスク

? [?] 疑問 x [x] 完了タスク

* [*] 重要 > [>] 先送りタスク

e [e] イベント < [<] リスケ済みタスク

注意

このサイトでは [_] と [x] に旧版のスタイル（Font Awesome不使用）が適用されてるので、上のサンプルじゃなく下の画像を見てね。

（画像サンプル）

https://gyazo.com/d2ad9106f2f17bb7c712b759b248b61d

BuJoユーザーはみんな思い思いのbulletを使ってるっていうし、その都度カスタムしていくつもりでやってます！

んでUserCSSなんだけど、アイコンの数だけ伸びるもんだからすごい長い。

プロジェクト名の置換もしなくちゃならないし、

エンコード必要かどうか調べたり、エンコードしたりするのめんどいし、

でも中身は単純なので、

これをなるべく簡単に半自動生成するUserScriptを書きました。そっちも次に書く。

書いた→ 量産型タグアイコン（おひとり様向け）

code:style.css

/* タグアイコンの共通スタイル (1) */

.line:not(.cursor-line) ahref$='/!':not(.icon) span,

.line:not(.cursor-line) ahref$='/%3F':not(.icon) span,

.line:not(.cursor-line) ahref$='/*':not(.icon) span,

.line:not(.cursor-line) ahref$='/_':not(.icon) span,

.line:not(.cursor-line) ahref$='/x':not(.icon) span,

.line:not(.cursor-line) ahref$='/%3E':not(.icon) span,

.line:not(.cursor-line) ahref$='/%3C':not(.icon) span,

.line:not(.cursor-line) ahref$='/e':not(.icon) span {

display: inline-block; width: 0; text-indent: -9999px }

/* タグアイコンの共通スタイル (2) */

.line:not(.cursor-line) ahref$='/!':not(.icon)::after,

.line:not(.cursor-line) ahref$='/%3F':not(.icon)::after,

.line:not(.cursor-line) ahref$='/*':not(.icon)::after,

.line:not(.cursor-line) ahref$='/_':not(.icon)::after,

.line:not(.cursor-line) ahref$='/x':not(.icon)::after,

.line:not(.cursor-line) ahref$='/%3E':not(.icon)::after,

.line:not(.cursor-line) ahref$='/%3C':not(.icon)::after,

.line:not(.cursor-line) ahref$='/e':not(.icon)::after {

display: inline-block; min-width: 1.15em; padding-left: 1px;

font: normal 110%/normal FontAwesome; text-align: center }

/* ここから各アイコンの設定 */

.line:not(.cursor-line) ahref$='/!':not(.icon)::after { content: '\f06a'; color: #F6AE2D }

.line:not(.cursor-line) ahref$='/%3F':not(.icon)::after { content: '\f059'; color: #758E4F }

.line:not(.cursor-line) ahref$='/*':not(.icon)::after { content: '\f069'; color: #F26419 }

.line:not(.cursor-line) ahref$='/_':not(.icon)::after { content: '\f0c8'; color: #08BDBD; font-weight: 400 }

.line:not(.cursor-line) ahref$='/x':not(.icon)::after { content: '\f14a'; color: #2489C5; font-weight: 400 }

.line:not(.cursor-line) ahref$='/%3E':not(.icon)::after { content: '\f14d'; color: lightgrey; font-weight: 400 }

.line:not(.cursor-line) ahref$='/%3C':not(.icon)::after { content: '\f274'; color: lightgrey; font-weight: 400 }

.line:not(.cursor-line) ahref$='/e':not(.icon)::after { content: '\f192'; color: #F26419 }

インポート構文

code:import.css

@import "https://scrapbox.io/api/code/scrasobox/Bullet_Journal_をやってみる/style.css";

#タグとあそぶ #タグスタイル展覧会

初出 2017-10-22

2017-10-24 スタイルの微調整

2017-11-26 スタイルの微調整

2017-12-02 スタイルの微調整

2018-03-27 タグリンクのhref値が変わったぽいので対応

2018-04-01 タグリンクのhref値が変わったぽいので対応

2021-07-06 Font Awesome のアップデートに対応

2022-03-19 タグリンクのhref値が変わったぽいので対応